<template>
    <div class="table-wrapper">

        <el-table :data="tableData" border>
            <el-table-column show-overflow-tooltip :key="index" v-for="(items,index) in tableD.tibleValue"
                             :label="items.value">
                <template slot-scope="scope" >

                    <span v-if="items.type=='text'">{{scope.row[items.model]}}</span>
                    <span  v-if="items.type=='handle'" >
                        <el-button  v-for=" (i,index) in items.list" v-if="isShowBth(i.term,scope.row)" :key="index" type="text" size="small"
                                    @click="handle(i,scope.row)">
                            {{i.label}}
                        </el-button>
                    </span>
                    <span v-if="items.type=='img'"><img :src="scope.row[items.model]" alt="" style="width: 100%"
                         v-if="scope.row[items.model]"></span>


                </template>
            </el-table-column>

        </el-table>
        <pagination :totalNum="total" :currentPage="pageNo"
                    @handleCurrentChange="handleCurrentChange"></pagination>
        <dialog-wrap ref="dialog" :data="data" :row="row"></dialog-wrap>
        <dialogForm ref="dialogForm"></dialogForm>
    </div>
</template>

<script>
    import pagination from '../../../../components/pagination/pagination'
    import dialogWrap from './dialog'
    import dialogForm from './dialogForm'
    export default {
        name: "Table",
        props: ["package","event"],
        components: {
            pagination,
            dialogWrap,
            dialogForm

        },
        provide() {
            return {
                data: this.data, // 可以修复
                row: this.row,
            }
        },
        data() {
            return {
                show:true,
                tableD: {},
                tableData: [],
                pageSize: 8,
                total: 0,
                pageNo: 1,
                dialogFormVisible: false,
                data: {
                    title: '2121'
                },
                row: {}
            }
        },
        created() {
            this.init()
        },
        methods: {
            //操作按钮判断事件
            handle(val, row) {
                switch (val.type) {
                    case 'to' :
                        this.$router.push({path: val.value, query: row})
                        break;
                    case 'affirm' :
                        this.affirm(val, row)
                        break;
                    case 'dialog':
                        this.showDialog(val, row)
                        break;
                    case 'form':
                        this.showDialogForm(val, row)
                        break;
                    default:
                }

            },
            isShowBth(term,row){

                return  row[term]

            },

            affirm(val, row) {
                const {id} = row
                this.$confirm(val.value, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.$message({
                        type: 'success',
                        message: '这是点击确定!'
                    });
                    console.log(this.api[val.url.module][val.url.value])
                    const res = await this.http[val.url.method](this.api[val.url.module][val.url.value], {id})
                    if (res.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '成功'
                        });
                        this.getList()
                    }
                    else {
                        this.$message.error(res.message)

                    }
                }).catch(() => {

                });
            },
            showDialog(val, row) {
                Object.assign(this.data, val.value) //
                Object.assign(this.row, row) //
                console.log(this.$refs.dialog)
                this.$refs.dialog.dialog = true
            },
            showDialogForm(val, row){
                Object.assign(this.data, val.value) //
                Object.assign(this.row, row) //
                this.$refs.dialogForm.dialog = true
            },
            //分页
            handleCurrentChange(val) {
                this.pageNo = val
                this.getList()
            },
            async showDig(id) {
                const params = {
                    id,
                }
                const res = await this.http.get(this.api.producer.getFarmerInfo2, params)
                Object.assign(this.row, res.data.obj)
                this.dialogFormVisible = true

            },
            //搜索
            search(searchCondition) {
                this.searchCondition = JSON.parse(JSON.stringify(searchCondition))
                this.pageNo = 1
                this.getList()
            },

            //获取本页数据
            async getList() {
                const params = {
                    "pageNum": this.pageNo,
                    "pageSize": this.pageSize,
                    searchContent: this.searchCondition,
                }
                console.log(this.package)
                console.log('321321')
                const {url} = this.package
                const res = await this.http.get(this.api[url.module][url.value], params)
                if (res && res.code == 200) {
                    this.total = Number(res.data.total)
                    this.tableData = res.data.list
                }
                else {
                    this.$message.error(res.message)
                }
            },
            init() {
                Object.assign(this.tableD, this.package) //
                this.getList()
            }


        },

        activated() {
            this.init()
        }
    }
</script>

<style scoped>
.table-wrapper{
     width: auto;
    padding: 15px 20px;
    margin-top:0px;
    background-color: #fff;
}
</style>
